<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="width">
      <div>
        <el-form ref="form" :model="video" label-width="120px">
          <el-form-item label="课时标题">
            <el-input v-model="video.title"></el-input>
          </el-form-item>
          <el-form-item label="课时排序">
            <el-input-number v-model="video.sort" :min="0"></el-input-number>
          </el-form-item>
          <el-form-item label="是否免费">
            <el-radio-group v-model="video.free">
              <el-radio :label="true">免费</el-radio>
              <el-radio :label="false">默认</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="上传视频">
            <el-upload
              class="upload-demo"
              ref="upload"
              :limit="1"
              action="http://127.0.0.1:9110/aliyun-video/admin/aliyun/video/upload"
              :on-exceed="handleExceed"
              :on-success="handleSuccess"
              :file-list="fileList"
              :auto-upload="false"
              :on-error="handleError"
              :show-file-list="true"
              :before-remove="handleBeforeRemove"
              :on-remove="handleRemove"
            >
              <el-button slot="trigger" size="small" type="primary"
                >选取视频文件</el-button
              >
              <el-button
                style="margin-left: 10px;"
                size="small"
                type="success"
                @click="submitUpload"
                >上传到服务器</el-button
              >
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="saveOrUpdate()"
          :disabled="uploadBtnDisabled"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import videoApi from "@/api/video";
export default {
  data() {
    return {
      fileList: [], //文件上传
      uploadBtnDisabled: false,
      dialogVisible: false,
      title: "添加课时",
      video: {
        title: "",
        sort: 0,
        free: false,
        courseId: "",
        chapterId: "",
      },
    };
  },
  methods: {
    handleRemove(fil, fileList) {
      if (!this.video.videoSourceId) {
        return;
      } else {
        videoApi.deleteVideo(this.video.videoSourceId).then((resp) => {
          this.$message.success(resp.message);
          this.video.videoOriginalName = "";
          this.video.videoSourceId = "";
        });
      }
    },
    handleBeforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleError() {
      this.uploadBtnDisabled = false;
      this.$message.error("文件上传失败");
    },
    handleSuccess(resp, file, fileList) {
      this.uploadBtnDisabled = false;
      if (resp.success) {
        this.video.videoSourceId = resp.data.videoId;
        this.video.videoOriginalName = file.name;
        this.fileList = [];
        this.$message.success(resp.message);
      } else {
        this.$message.error("上传失败！");
      }
    },
    submitUpload() {
      this.uploadBtnDisabled = true;
      this.$refs.upload.submit(); //提交上传请求
    },

    handleExceed(file, fileList) {
      this.$message.warning("最多上传一个视频，请先删除已上传的视频！");
    },
    open(val, id) {
      this.dialogVisible = val;
      this.video.chapterId = id;
    },

    edit(val, videoId) {
      this.dialogVisible = val;
      this.title = "修改课时";
      if (this.video.videoSourceId) {
        this.fileList = [{ name: this.video.videoOriginalName }];
        console.log(this.fileList);
      }
      videoApi.getVideoById(videoId).then((resp) => {
        if (resp) {
          this.video = resp.data.item;
        }
      });
    },
    /**
     * 保存或更新课时信息
     */
    saveOrUpdate() {
      if (!this.video.id) {
        this.video.courseId = this.$parent.$parent.courseId;
        videoApi.addVideo(this.video).then((resp) => {
          if (resp) {
            this.$message.success(resp.message);
            (this.video.title = ""), (this.sort = 0);
            this.$parent.initChapterList();
            this.dialogVisible = false;
          }
        });
      } else {
        videoApi.updateVideoById(this.video).then((resp) => {
          if (resp) {
            this.$message.success(resp.message);
            (this.video.title = ""), (this.sort = 0);
            this.$parent.initChapterList();
            this.dialogVisible = false;
          }
        });
      }
    },
  },
};
</script>

<style></style>
